<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/item.css">
    <title>项目立项</title>
</head>
<body class="all">
<div id="items">
    <div class="top">
        <div>
            <button type="button" class="layui-btn" @click="addProject()"><i class="layui-icon">&#xe608;</i> 添加</button>
            <!--<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</button>-->
            <button type="button" class="layui-btn layui-btn-normal" @click="exports"><i class="layui-icon">&#xe621;</i>导出</button>
        </div>
    </div>
    <div class="tabs">
        <table cellpadding="0" cellspacing="0" ref="name" id="item">
            <tr style="font-weight: bold">
                <td>序号</td>
                <td>操作</td>
                <td>项目名称</td>
                <td>项目编号</td>
                <td>项目地址</td>
            </tr>
            <tr v-for="(item, index) in arr" :key='index' :class="item.statusr==true ? 'addStyle':''">
                <td>{{index+1}}</td>
                <td>
                    <span class="operation" v-if="item.shows==1" @click="editor(index)">编辑</span>
                    <span class="operation" v-else @click="saves(item.id,index)">保存</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td v-bind:contentEditable="item.statusr" @blur="upd">{{item.name}}</td>
                <td v-bind:contentEditable="item.statusr" @blur="upd">{{item.number}}</td>
                <td v-bind:contentEditable="item.statusr" @blur="upd">{{item.address}}</td>
            </tr>
        </table>
    </div>
    <div id="demo8"></div>
    <div class="x-body" id="addopen" style="display: none;padding-top: 10px">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="ipts">
                    项目名称：
                    <input type="text" name="names" placeholder="请输入" class="layui-input">
                </div>
                <div class="ipts">
                    项目编号：
                    <input type="text" name="numbers" placeholder="请输入" class="layui-input">
                </div>
                <div class="ipts">
                    项目地址：
                    <input type="text" name="address" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn ipts_btn" type="button" lay-filter="add" lay-submit="">
                    添加
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script>
    layui.use(['element', 'laypage', 'layer', 'form'], function(){
        var laypage = layui.laypage,
            layer = layui.layer;
        form = layui.form;
        var element = layui.element;
        //添加项目
        form.on("submit(add)",function(data){
            var obj = {
                name: data.field.names,
                number: data.field.numbers,
                address: data.field.address
            }
            var load = layer.load(0, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            })
            $.when(PUATTRBUTE.REQUESTFUN('api/index/projectadd', obj).done(function(res){
                layer.close(load);
                layer.closeAll();
                if(res.code == 1){
                    layer.msg(res.msg, {time: 2000, icon:1});
                    vm.initData();
                    parent.location.reload();
                }else{
                    layer.msg(res.msg, {time: 3000, icon:2});
                }
            }))
        })
    });
    var vm = new Vue({
        el: '#items',
        data: {
            token: '',
//            statusr:false,
            project_id: '',
            page: 1,
            arr: [],
            ids:'',
            name:'',
            number:'',
            address:'',
            stus:1,
            count: 0,
            permissions:''//权限标识
        },
        created: function () {
            this.initData();
        },
        methods: {
            //初始化数据
            initData: function () {
                var obj = {
                    page: this.page,
                    limit: 12
                }
                $.when(PUATTRBUTE.REQUESTFUN('api/index/projectselect', obj).done(function (res){
                        if(res.code == 1){
                            sessionStorage.setItem('projectselect', JSON.stringify(res.data.project)); //所有项目集合
                            var arrs = res.data.project;
                            for(item in arrs){
                                arrs[item].statusr = false;
                                arrs[item].shows = 1;
                            }
                            vm.arr = arrs;
                            vm.initpage(res.data.count);
                        }else{
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            vm.initpage(0);
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            //添加
            addProject:function () {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！")
                }else {
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '320px'], //宽高
                        title: '新增项目信息',
                        content: $("#addopen")
                    });
                }
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.when(PUATTRBUTE.REQUESTFUN('api/index/projectdel', obj).done(function(res){
                            layer.close(load);
                            layer.closeAll();
                            if(res.code == 1){
                                layer.msg(res.msg, {time: 1000, icon: 1});
                                vm.initData();
                                parent.location.reload();
                            }else{
                                layer.msg(res.msg, {time: 1000, icon: 2});
                            }
                        })
                    )
                }, function(){
                    layer.closeAll();
                });
            },
            upd:function (data) {
                var num = data.target.cellIndex;
                if(num == 2){
                    this.name = data.target.innerText
                }else if(num == 3){
                    this.number = data.target.innerText
                }else if(num == 4){
                    this.address = data.target.innerText
                }
            },
            saves:function (id,idx) {
                this.ids = id;
                var obj = vm.arr[idx];
                obj.id= this.ids;
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                if(vm.name != ''){
                    obj.name = vm.name;
                }
                if(vm.number != ''){
                    obj.number = vm.number;
                }
                if(vm.address != ''){
                    obj.address = vm.address;
                }
                this.$set(this.arr[idx], 'statusr', false);
                this.$set(this.arr[idx], 'shows', 1);
                this.stus = 1;
                var that = this;
                $.when(PUATTRBUTE.REQUESTFUN('api/index/projecteditdo', obj).done(function(res){
                        layer.closeAll();
                        that.name = '';
                        that.number = '';
                        that.address = '';
                        that.ids = '';
                        if(res.code == 1){
                            layer.msg(res.msg, {time: 1000, icon: 1});
                            vm.initData();
                            parent.location.reload();
                        }else{
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            editor:function (idx) {
                if(this.stus == 1){
                    this.stus = 2;
                    this.$set(this.arr[idx], 'statusr', true);
                    this.$set(this.arr[idx], 'shows', 2);
                }else {
                    layer.alert('请先保存');
                    return false;
                }
            },
            initpage: function (count) {
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: 12
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            },
            //导出
            exports: function () {
                if(vm.permissions == 1){
                    layer.alert("抱歉，您没有此权限！")
                }else {
                    var tableHtml = $('#item');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "项目立项.xls";
                    urlA.click();
                }
            }
        }
    })
</script>

